<template>
    <div class="container">
        <p class="hello">{{ name }}</p>
        <button @click="show()">点我</button>
        <h4>
            嘿嘿
            <span>哈哈哈哈</span>
        </h4>
    </div>
</template>

<script>
export default {
    data(){
        return {
            name: 'tom'
        }
    },
    methods: {
        show(){
            this.name = '汤姆'
        }
    }
}
</script>

<style scoped lang="less">
.container{
    border: 1px solid red;

    p.hello{
        color: pink;
    }

    h4{
        color: red;

        span{
            text-decoration: underline;
        }
    }
}
</style>